<template>
<div>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="文章列表" name="first">
      <!-- <div class="wenxintishi">
        温馨提示
      </div>
      <div class="tishi">
        <p class="p1">
          稿件时效默认为1个月，如不包时效,请备注写明。
        </p>
        <p>
          为避免错过订单，请入驻媒体编辑们不要关闭本平台网页，有订单后将会第一时间接到本网站弹窗提示
        </p>
        <p>
          关于是否包收录，权重等信息，建议查询之后如实填写
        </p>
      </div> -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm fome1">
        <el-form-item label="媒体名称:" prop="name" class="float widtt">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="频道类型:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="入口级别:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在地区:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="入口链接:" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="案例链接:" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="链接类型:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发稿速度:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="新闻源:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="周末可发:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="综合门户媒体:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特别行业:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="收录情况:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电脑权重:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="移动权重:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成本价格:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="备注说明" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="right">
        <div class="wenxintishi">
          温馨提示
        </div>
        <div class="tishi">
          <p class="p1">
            稿件时效默认为1个月，如不包时效,请备注写明。
          </p>
          <p>
            为避免错过订单，请入驻媒体编辑们不要关闭本平台网页，有订单后将会第一时间接到本网站弹窗提示
          </p>
          <p>
            关于是否包收录，权重等信息，建议查询之后如实填写
          </p>
        </div>
      </div> -->
    </el-tab-pane>
    <el-tab-pane label="代写列表" name="second">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm fome1">
        <el-form-item label="代写名称:" prop="name" class="float widtt">
          <el-input v-model="ruleForm.name" placeholder="为自己取一个响亮的名字"></el-input>
        </el-form-item>
        <el-form-item label="写手类型:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="写手类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="文章类型:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="文章类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="擅长类型:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="擅长类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>

        <el-form-item label="出稿时间:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="出稿时间">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改次数:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="修改次数">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="价 格:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="价 格">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否接受议价:" prop="name" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="文章字数:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="QQ:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>
        <el-form-item label="案 例:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="region" class="float">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <div style="clear:both;">

        </div>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="自媒体列表" name="third">


    </el-tab-pane>
  </el-tabs>
</div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur'
          }
        ],
        region: [{
          required: true,
          message: '请选择活动区域',
          trigger: 'change'
        }],
        date1: [{
          type: 'date',
          required: true,
          message: '请选择日期',
          trigger: 'change'
        }],
        date2: [{
          type: 'date',
          required: true,
          message: '请选择时间',
          trigger: 'change'
        }],
        type: [{
          type: 'array',
          required: true,
          message: '请至少选择一个活动性质',
          trigger: 'change'
        }],
        resource: [{
          required: true,
          message: '请选择活动资源',
          trigger: 'change'
        }],
        desc: [{
          required: true,
          message: '请填写活动形式',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>
<style lang="scss" scoped>
.wenxintishi {
    background-color: #f5f5f5;
    padding: 10px 15px;
    text-align: center;
    color: #444;
    font-size: 14px;
}
.tishi {
    text-align: center;
    margin-top: 17px;
    padding-bottom: 10px;
    border-bottom: 2px #e4e7ed solid;
    p {
        font-size: 14px;
        margin: 8px 0;
        color: #5a5d5a;
    }
    .p1 {
        color: #f00;
        margin-bottom: 5px;
    }

}
.float{
  float: left;
}
.fome1{
      width: 674px;
      // margin: 0 auto;
margin-top: 19px;
}
.widtt{
  /deep/.el-input__inner{
    width: 217px;
  }

}
.right{

}
</style>
